<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>编辑</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			function previewImage(file) {
				var MAXWIDTH = 90;
				var MAXHEIGHT = 90;
				var div = document.getElementById('preview');
				if(file.files && file.files[0]) {
					div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
					var img = document.getElementById('imghead');
					img.onload = function() {
						var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
						img.width = rect.width;
						img.height = rect.height;
						//						img.style.marginTop = rect.top + 'px';
					}
					var reader = new FileReader();
					reader.onload = function(evt) { img.src = evt.target.result; }
					reader.readAsDataURL(file.files[0]);
				}
			}

			function clacImgZoomParam(maxWidth, maxHeight, width, height) {
				var param = { top: 0, left: 0, width: width, height: height };
				if(width > maxWidth || height > maxHeight) {
					rateWidth = width / maxWidth;
					rateHeight = height / maxHeight;

					if(rateWidth > rateHeight) {
						param.width = maxWidth;
						param.height = Math.round(height / rateWidth);
					} else {
						param.width = Math.round(width / rateHeight);
						param.height = maxHeight;
					}
				}
				param.left = Math.round((maxWidth - param.width) / 2);
				param.top = Math.round((maxHeight - param.height) / 2);
				return param;
			}
		</script>
	</head>

	<body>
		<div class="h66">
			<img src="images/cs.png" />
		</div>
		<!--上传-->
		<div class="uploadImg">
			<span>头像</span>
			<div class="uploadhead">
				<div id="preview">
					<img id="imghead" border="0" src="images/upload.png" width="90" height="90" onClick="$('#previewImg').click();">
				</div>
				<input type="file" onChange="previewImage(this)" style="display: none;" id="previewImg">
			</div>

		</div>
		<form>
			<div class="upload">
				<ul>
					<li>
						<label>名称<input type="text" placeholder="请输入您名称"/></label>
					</li>
					<li>
						<label>手机号码<input type="text" placeholder="请输入您的手机号" value="18703625584"/></label>
					</li>
					<li>
						<label>银行卡号<input type="text" placeholder="请输入您的银行卡号" value="6228480402564890018"/></label>
					</li>
				</ul>
			</div>
			<div class="audio">
				<a href="###" class="aBtn">确定</a>
			</div>
		</form>

	</body>

</html>